<template>
  <div class="add-dialog">

    <el-dialog title="新增" :visible="dialogVisible" width="45%" @close="closeDialog">
      <el-form ref="ruleForm" :model="form" :rules="rules">
        <el-form-item label="活动名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="活动区域" :label-width="formLabelWidth" prop="region">
          <el-input v-model="form.region" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div class="addBtn">
        <el-button type="primary" @click="addMorm">创建准则</el-button>
        <el-button type="primary" @click="addElement">创建要素</el-button>
        <el-button type="primary" @click="addIdex">创建指标</el-button>
      </div>
      <el-table
        :data="tableData"
        border
        show-summary
        :summary-method="getSummaries"
      >
        <el-table-column
          type="index"
          width="50"
          label="序号"
        />
        <el-table-column property="date" label="准则层" width="150" />
        <el-table-column property="name" label="要素层" width="200" />
        <el-table-column property="address" label="指标层" />
        <el-table-column property="address" label="指标离散化" />
        <el-table-column prop="count" property="count" label="指标权重(%)" width="180">
          <template slot-scope="{ row, $index }">
            <el-button
              size="mini"
              :disabled="row.count <= 1"
              @click="reduce($index)"
            >-
            </el-button>
            {{ row.count }}
            <el-button
              size="mini"
              @click="addNum($index)"
            >+
            </el-button>
          </template>
        </el-table-column>
        <el-table-column property="" label="操作">
          <template slot-scope="scope">

            <a @click="edit(row)">
              <i class="el-icon-edit" />
            </a>
            <a @click="del(row.id)">
              <i class="el-icon-delete" />
            </a>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
    <Edit />
  </div>
</template>
<script>
import Edit from '@/views/tableTwo/components/Edit.vue'
export default {
  components: { Edit },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        num: 20,
        count: 1
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        num: 20,
        count: 2
      }
      ],
      editDialogVisible: false, // 编辑弹框
      dialogTableVisible: false,
      dialogFormVisible: false,
      editForm: {}, // 修改框的回显数据
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    del(id) {
      this.$confirm('此操作将永久删除该项目，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then((res) => {
          // 点击确定时 调接口 传参id传给后台 让后台删除
          // filter把tableData中不为当前点击的id的项都筛选出来  然后再赋值给tableData
          this.tableData = this.tableData.filter((item) => item.id != id) // 手动删除
          this.$message.success('删除成功')
        })
        .catch((err) => {
          console.log(err)
          this.$message.error('取消删除')
        })
    },
    edit(val) {
      this.editForm = val
      console.log(val)
      this.editDialogVisible = true
    },
    closeDialog() {
      this.$emit('closeDialog')
    },
    addMorm() {},
    addElement() {},
    addIdex() {},
    // 确定
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const total = this.tableData.reduce((prev, curr) => prev + curr.count, 0)
          if (total >= 100) {
            this.closeDialog()
          } else {
            this.$message.error('总计数量必须为100以上')
          }
          // alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 取消
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.closeDialog()
      this.form.name = ''
      this.form.region = ''
    },
    getSummaries({ columns, data }) {
      console.log(columns, data, 'columns, data的最新的值')
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计' // 首列标题
          return
        }
        if (column.property === 'count') { // 指定统计列
          const values = data.map(item => Number(item[column.property]))
          sums[index] = values.reduce((prev, curr) => prev + curr, 0)
        } else {
          sums[index] = '' // 非统计列留空
        }
      })
      return sums
    },
    addNum(index) {
    // 直接修改数组项需要深拷贝触发响应式
      const newRow = JSON.parse(JSON.stringify(this.tableData[index]))
      newRow.count++
      this.$set(this.tableData, index, newRow)
    },
    reduce(index) {
      if (this.tableData[index].count <= 1) return
      const newRow = JSON.parse(JSON.stringify(this.tableData[index]))
      newRow.count--
      this.$set(this.tableData, index, newRow)
    }
  }
}
</script>
<style lang="scss" scoped>
.addBtn {
  margin-bottom: 20px;
}
</style>
